<template>
	<view style="padding-bottom: 100rpx;">
		<view class="order-content">
			<view style="margin-bottom: 40rpx;">

				<view class="detail-title">
					<text>考核信息</text>
				</view>
				<view class="content-item">
					<text class="item-name">巡场地址：</text>
					<view class="right-content">{{ '桐鹤名苑一区1-1-101'}}</view>
				</view>
				<view class="content-item">
					<text class="item-name">有效期：</text>
					<view class="right-content">{{'2021-11-15  ~ 2021-11-21'}}</view>
				</view>
				<view class="content-item">
					<text class="item-name">巡场时间：</text>
					<view class="right-content">{{ '2021-11-17 15:54:24'}}</view>
				</view>
			</view>
			<view style="margin-bottom: 40rpx;">
				<view class="detail-title">
					<text>巡场事项</text>
				</view>
			</view>
		</view>
		<!-- <view style="margin-top: -140rpx;">
			<assess-table @submit="onSubmit" ref="assessTable" :list="assessInfo['考核事项']"></assess-table>
		</view> -->
		<view v-for="item in assessInfo['考核事项']" :key="item.id">
			<view  class="check-title">{{item['事项名称']}}</view>

			<view v-if="item['考核细则']">
				<view  class="check-item" :key="subItem.id" v-for="(subItem,index) in item['考核细则']">
					<view>
						{{index+1}}、{{subItem['考核要求']}}（上限{{subItem['分数上限']}}分）
					</view>
					<view class="check-result">
						<view @click="switchShow(subItem)" style="color: #1152FC;">{{subItem.show ? '隐藏':'上传图片'}}</view>
						<van-stepper @change="onChange(item, subItem, $event)" input-width="120rpx"  button-size="64rpx"  :value="subItem['得分']" min="0" :max="subItem['分数上限']" />
					</view>
					<unquality-check @input="handleInput(item, subItem, $event)" @change="handleChange(item, subItem, $event)" @upload="handleUpload(item, subItem, $event)" v-show="subItem.show"></unquality-check>
				</view>
			</view>
			
		</view>
		<view>
		
			<view>
				<view  class="check-item">
					<view>
						1、装修现场是否配备足够能有效使用的灭火器(2具/户)        
					</view>
					<view class="check-result">
						<view @click="switchShow(subItem)" style="color: #1152FC;">{{'上传图片'}}</view>
						<view class="right-result">
							<text style="margin-right: 20rpx;">是否合格</text>
							<van-switch @change="onChange" :checked="checked" size="24px" />
						</view>
						
					</view>
					<unquality-check @input="handleInput(item, subItem, $event)" @change="handleChange(item, subItem, $event)" @upload="handleUpload(item, subItem, $event)"></unquality-check>
				</view>
				<view  class="check-item">
					<view>
						2、装修现场是否配备足够能有效使用的灭火器(2具/户)        
					</view>
					<view class="check-result">
						<view @click="switchShow(subItem)" style="color: #1152FC;">{{'上传图片'}}</view>
						<view class="right-result">
							<text style="margin-right: 20rpx;">是否合格</text>
							<van-switch @change="onChange" :checked="checked" size="24px" />
						</view>
						
					</view>
					<unquality-check @input="handleInput(item, subItem, $event)" @change="handleChange(item, subItem, $event)" @upload="handleUpload(item, subItem, $event)" v-show="subItem.show"></unquality-check>
				</view>
			</view>
			
		</view>
		
		<button @click="onSubmit" class="assess-submit-btn">提交</button>
	</view>

</template>

<script>
	import VanSwitch from '@/wxcomponents/vant/dist/switch'
	import upload from '@/components/upload.vue'
	import UnqualityCheck from '../components/unqualityCheck.vue'
	export default {
		components: {
			VanSwitch,
			upload,
			UnqualityCheck
		},
		data() {
			return {
				checked: true,
				isShow: false,
				assessInfo: {},
				params: {
					项目id: null,
					考核id: null,
					考核事项: []
				}
			}
		},
		onLoad(options) {
			this.params.项目id = +options.projId
			this.params.考核id = +options.id
			// this.getAssessInfo(+options.id)
			// this.getAssessCondition(+options.id)
		},
		methods: {
			switchShow(item) {
				item.show = !item.show
			},
			onChange(event) {
				this.checked = event.detail
			},
			handleInput(obj, childObj, e) {
				const item = this.params.考核事项.find(item => item.事项id === obj.id && item.内容id === childObj.id)
				item.问题描述 = e
			},
			handleChange(obj, childObj, e) {
				const item = this.params.考核事项.find(item => item.事项id === obj.id && item.内容id === childObj.id)
				item.checkd = e
				if(e) {
					item.得分 = 0
					childObj.得分 = 0
				}else {
					item.得分 = item.附件.length * (childObj.考核标准扣分 / childObj.考核标准项数)
					childObj.得分 = item.附件.length * (childObj.考核标准扣分 / childObj.考核标准项数)
				}
				
			},
			handleUpload(obj, childObj, e) {
				const item = this.params.考核事项.find(item => item.事项id === obj.id && item.内容id === childObj.id)
				item.附件 = e
				if(!childObj.checked) {
					childObj.得分 = item.附件.length * (childObj.考核标准扣分 / childObj.考核标准项数)
					item.得分 = childObj.得分
				}
			},
			onSubmit() {
				this.handleSubmit()
			},
			handleSubmit() {
				uni.showLoading()
				this.$http.post('/transactionCompete/evaluate', this.params).then(res => {
					if(res.code === 10000) {
						uni.redirectTo({
							url: '/ticketSystem/acceptSuccess/acceptSuccess?path=/assessSystem/index/index' + '&title=返回考评首页'
						})
					}
				})
			},
			async getAssessInfo(id) {
				uni.showLoading()
				const res = await this.$http.post('transactionCompete/assessmentManagement/info', {id})
				if (res.code === 10000) {
					res.data.考核事项.forEach(item => {
						item.考核细则 = item.考核细则 || []
						item.子事项 = item.子事项 || []
					})
					for(let i = 0; i < res.data.考核事项.length; i++) {
						for(let j = 0; j < res.data.考核事项[i].考核细则.length; j++) {
							res.data.考核事项[i].考核细则[j].show = false
							this.params.考核事项.push({
								事项id: res.data.考核事项[i].id,
								内容id: res.data.考核事项[i].考核细则[j].id,
								checked: false,
								得分: null,
								附件: [],
								问题描述: null
							})
						}	
					 }
					 let childCheck = res.data.考核事项.map(item => item.子事项).reduce((a,b) => { return a.concat(b)})
					 for(let i = 0; i < childCheck.length; i++) {
					 	for(let j = 0; j < childCheck[i].考核细则.length; j++) {
					 		childCheck[i].考核细则[j].show = false
					 		this.params.考核事项.push({
					 			事项id: childCheck[i].id,
					 			内容id: childCheck[i].考核细则[j].id,
					 			checked: false,
					 			得分: null,
					 			附件: [],
					 			问题描述: null
					 		})
					 	}	
					  }
					console.log('child', childCheck)
					this.assessInfo = res.data
				}
			},
			async getAssessCondition(id) {
				this.params.考核项目id = id
				const res = await this.$http.post('transactionCompete/assessmentFactSheetlist', this.params)
				if(res.code === 10000) {
					console.log(res)
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../style/info.scss';
	.unquality-assess-item {
		width: 674rpx;
		height: 360rpx;
		padding: 20rpx;
		border: 2rpx solid #B5B5B5;
		margin-bottom: 20rpx;
		.top-box {
			display: flex;
			justify-content: space-between;
		}
		.desc {
			margin-bottom: 20rpx;
			display: flex;
			input {
				width: 450rpx;
			}
		}
		.img-content {
			display: flex;
			margin-left: -20rpx;
			.img-item {
				width: 140rpx;
				height: 140rpx;
				margin: 10rpx;
				.img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.order-content {
		margin-bottom: 0;
	}
	.check-title {
			height: 80rpx;
			font-size: 40rpx;
			text-align: center;
			line-height: 60rpx;
			border-bottom: 2rpx solid #DEDEDE;
			margin-bottom: 30rpx;
		}
	.check-child-title {
			height: 60rpx;
			font-size: 32rpx;
			text-align: center;
			line-height: 40rpx;
			border-bottom: 2rpx solid #DEDEDE;
			margin-bottom: 30rpx;
		}
	
		.check-item {
			margin-bottom: 40rpx;
			font-size: 32rpx;
			padding: 0 20rpx;
			.unquality-check-item {
				width: 674rpx;
				height: 258rpx;
				padding: 20rpx;
				border: 2rpx solid #B5B5B5;
				margin-bottom: 20rpx;
	
				.desc {
					margin-bottom: 20rpx;
					display: flex;
	
					input {
						width: 450rpx;
					}
				}
	
				.img-content {
					display: flex;
	
					.img-item {
						width: 140rpx;
						height: 140rpx;
						margin: 10rpx;
	
						.img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	
		.check-result {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.switch {
				color: #3080FB;
			}
			.right-result {
				padding-right: 40rpx;
				display: flex;
				align-items: center;
			}
		}
	
	.assess-title {
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
	}
	.assess-submit-btn {
		position: fixed;
		height: 98rpx;
		text-align: center;
		color: #fff;
		line-height: 98rpx;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 0;
		background-color: #1152FC;
		z-index: 99;
		&::after {
			border-radius: 0;
		}
	}
</style>
